import {
  ProCard,
  ProForm,
  ProFormDigit,
  ProFormList,
  ProFormRadio,
  ProFormText,
  ProFormUploadDragger,
} from '@ant-design/pro-components';
import { useNode } from '@craftjs/core';
import { IBaseTableProps } from '@jeoshi-design/rex-design.data-display.core';
import {
  Collapse,
  Form,
  FormInstance,
  Slider,
  Switch,
  TableProps,
  Tabs,
  Typography,
} from 'antd';
import React from 'react';

type SettingTableProps = IBaseTableProps<Record<string, any>>;

export const Settings = () => {
  const {
    actions: { setProp },
    columns: tableColumns = [],
    scroll = { x: undefined, y: undefined },
    showHeader = true,
  } = useNode<IBaseTableProps<Record<string, any>>>((node) => ({
    ...node.data.props,
  }));

  const columnsFormRef = React.useRef<FormInstance>();

  return (
    <>
      <Typography.Title level={3}>ProTable Settings</Typography.Title>
      <Tabs type="card">
        <Tabs.TabPane key={'tab1'} tabKey="tab1" tab="通用设置">
          <Collapse defaultActiveKey={['1', '2']}>
            <Collapse.Panel header="表头" key={'1'}>
              <Form.Item label="Show Header">
                <Switch
                  value={showHeader}
                  onChange={(v) =>
                    setProp(
                      (props: SettingTableProps) => (props.showHeader = v),
                    )
                  }
                ></Switch>
              </Form.Item>
            </Collapse.Panel>
          </Collapse>
        </Tabs.TabPane>
        <Tabs.TabPane key={'tab2'} tabKey="tab2" tab="样式设置">
          <Collapse defaultActiveKey={['1', '2']}>
            <Collapse.Panel header="XY轴滚动" key={'1'}>
              <Form.Item label="X轴">
                <Slider
                  min={0}
                  max={2000}
                  value={
                    (
                      scroll as {
                        x?: number | true | string;
                        y?: number | string;
                      }
                    ).x as number
                  }
                  onChange={(value) =>
                    setProp((props: SettingTableProps) => {
                      props.scroll = props?.scroll || {
                        x: undefined,
                        y: undefined,
                      };
                      props.scroll = {
                        x: value,
                        y: (
                          props.scroll as {
                            x?: number | true | string;
                            y?: number | string;
                          }
                        ).y,
                      };
                    })
                  }
                />
              </Form.Item>
              <Form.Item label="Y轴">
                <Slider
                  min={0}
                  max={2000}
                  value={
                    (
                      scroll as {
                        x?: number | true | string;
                        y?: number | string;
                      }
                    ).y as number
                  }
                  onChange={(value) =>
                    setProp((props: SettingTableProps) => {
                      props.scroll = props?.scroll || {
                        x: undefined,
                        y: undefined,
                      };
                      props.scroll = {
                        y: value,
                        x: (
                          props.scroll as {
                            x?: number | true | string;
                            y?: number | string;
                          }
                        ).x,
                      };
                    })
                  }
                />
              </Form.Item>
            </Collapse.Panel>
          </Collapse>
        </Tabs.TabPane>
        <Tabs.TabPane key={'tab3'} tabKey="tab3" tab="列设置">
          <Collapse defaultActiveKey={['1', '2']}>
            <Collapse.Panel header={'列'} key={'1'}>
              <ProForm
                formRef={columnsFormRef}
                onFinish={(values) => {
                  setProp(
                    (props: SettingTableProps) =>
                      (props.columns = values.columns),
                  );
                }}
              >
                <ProFormList<TableProps['columns']>
                  name={'columns'}
                  copyIconProps={false}
                  creatorButtonProps={{
                    creatorButtonText: '添加列',
                  }}
                  creatorRecord={{
                    title: '',
                    dataIndex: '',
                    fixed: false,
                    width: 100,
                  }}
                  itemRender={({ listDom, action }, { index }) => {
                    return (
                      <ProCard
                        title={`第${index + 1}列`}
                        extra={action}
                        bordered
                        style={{ marginBlockEnd: 8 }}
                      >
                        {listDom}
                      </ProCard>
                    );
                  }}
                  initialValue={[...tableColumns]}
                >
                  <ProFormText
                    name={'title'}
                    label={'列标题'}
                    placeholder={'请输入'}
                    required
                    rules={[{ required: true, message: '请输入列标题' }]}
                  ></ProFormText>
                  <ProFormText
                    name={'dataIndex'}
                    label={'索引值'}
                  ></ProFormText>
                  <ProFormDigit
                    name={'width'}
                    min={0}
                    label={'宽度'}
                  ></ProFormDigit>
                  <ProFormRadio.Group
                    name={'fixed'}
                    label={'固定列'}
                    options={[
                      {
                        label: '左',
                        value: 'left',
                      },
                      {
                        label: '右',
                        value: 'right',
                      },
                    ]}
                  ></ProFormRadio.Group>
                </ProFormList>
              </ProForm>
            </Collapse.Panel>
          </Collapse>
        </Tabs.TabPane>
        <Tabs.TabPane key={'tab4'} tabKey="tab4" tab="导入">
          <ProFormUploadDragger
            label={'列导入'}
            accept=".json"
            onChange={async (event) => {
              const reader = new FileReader();
              reader.readAsText(event.file.originFileObj as Blob);

              reader.onload = () => {
                try {
                  const data = JSON.parse(reader.result as string);
                  setProp((props: SettingTableProps) => (props.columns = data));

                  columnsFormRef.current?.resetFields();
                } catch (error) {}
              };
            }}
          ></ProFormUploadDragger>
          <ProFormUploadDragger label={'行导入'}></ProFormUploadDragger>
        </Tabs.TabPane>
      </Tabs>
    </>
  );
};
